<template>
  <div>
    <guest-search :payload="payload" @change="saveParams"></guest-search>
    <a-card>
      <a-button @click="showModal" type="primary" class="add-btn">添加</a-button>
      <a-table :pagination="false" rowKey="id" :dataSource="data" :columns="columns">
        <template #avatar_url="text">
          <my-image :src="text"></my-image>
        </template>
        <template #action="text,record">
          <div class="action-box">
            <status-btn :status="record.status" @click="changeStatus(record)"></status-btn>
            <span class="primary">修改</span>
            <span @click="remove(record)" class="danger">删除</span>
          </div>
        </template>
      </a-table>
      <my-pagination :payload="payload" :total="total"></my-pagination>
      <a-modal
        :maskClosable="false"
        :destroyOnClose="true"
        :title="record.id ? '修改' : '添加'"
        v-model="visible"
        @ok="onSubmit"
        :width="600"
      >
        <a-form @submit.prevent="onSubmit" :form="form">
          <a-form-item v-bind="formItemLayout" label="姓名">
            <a-input
              v-decorator="['name',{initialValue: record.name || '', rules: [{ required: true, message: '名字' }]}]"
              size="large"
              placeholder="请输入"
            ></a-input>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="头像">
            <upload-qn
              v-decorator="['avatar',{initialValue: record.avatar || [], rules: [{ required: true, message: '头像' }]}]"
            ></upload-qn>
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import GuestSearch from './GuestSearch.vue'

import * as Api from '@/api/guest'

const columns = [
  // { title: '编号', dataIndex: 'id' },
  { title: '头像', dataIndex: 'avatar_url', scopedSlots: { customRender: 'avatar_url' } },
  { title: '操作', scopedSlots: { customRender: 'action' } },
]

export default {
  components: {
    GuestSearch
  },
  data() {
    return {
      form: this.$form.createForm(this),
      columns,
      data: [],
      payload: this.getPayload(),
      total: 0,
      record: {},
      visible: false
    }
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    async fetchList() {
      const data = await Api.list(this.payload)
      this.data = data.list
      this.total = data.total
    },
    async changeStatus(record) {
      await Api.change(record)
      this.$message.success('修改成功')
      this.fetchList()
    },
    showModal(record = {}) {
      const r = { ...record }
      if (r.id) {
        r.avatar = [{
          url: record.avatar_url,
          path: record.avatar
        }]
      }
      this.record = r
      this.$nextTick(() => {
        this.visible = true
      })
    },
    remove({ id }) {
      this.$confirm({
        title: '请确认',
        content: '删除后将不能恢复',
        onOk: async () => {
          await Api.remove(id)
          this.$message.success('删除成功')
          this.data = this.data.filter(item => item.id !== id)
        }
      })
    },
    onSubmit() {
      this.form.validateFields(async (err, v) => {
        if (err) return
        const values = { ...v }
        const { id } = this.record
        values.avatar = values.avatar[0].path

        if (id) {
          values.id = id
          await Api.update(values)
          this.$message.success('更新成功')
        } else {
          await Api.add(values)
          this.$message.success('添加成功')
        }
        this.visible = false
        this.fetchList()
      })
    }
  }
}
</script>

<style>
</style>
